<template>
  <div class="container-layer-releasedynamic">
    <textarea v-model="form.content" class="block-releasedynamic-textarea" cols="30" rows="10" placeholder="写下你想说的吧…" />
    <div class="container-puload-image">
      <van-uploader
        v-model="fileList"
        multiple
        :after-read="afterRead"
      />
      <!-- :max-size="2000" -->
      <!-- @delete="deleteImage" -->
    </div>
    <!-- 按钮 -->
    <div class="submit-btn" @click="submit">发布</div>
  </div>
</template>

<script>
// api
import { createDynamic } from '@/api/dynamic'
import { uploadImage } from '@/api/miva_utils'
export default {
  data() {
    return {
      fileList: [],
      form: {
        content: '',
        photo: []
      }
    }
  },
  methods: {
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
      const formData = new FormData()
      formData.append('file', file.file)
      console.log(file)
      uploadImage()
        .then(res => {
          const { data: { image_adr = '' }} = res
          const firstIndex = image_adr.indexOf('.com/')
          const lastIndex = image_adr.indexOf('?')
          const image = image_adr.slice(firstIndex + 5, lastIndex)
          this.form.photo.push({
            image_adr: `${image}`
            // thumb_adr: `${image}`
          })
        })
        .catch(err => {
          this.$dialog.alert({
            message: err
          })
        })
      // const { code, msg, data: { image_adr = '' }} = await uploadImage(formData)
      // console.log(code)
      // // eslint-disable-next-line
      // if (code == 0) {
      //   this.$dialog.alert({
      //     message: msg
      //   })
      //   return
      // }
      // const firstIndex = image_adr.indexOf('.com/')
      // const lastIndex = image_adr.indexOf('?')
      // const image = image_adr.slice(firstIndex + 5, lastIndex)
      // this.form.photo.push({
      //   image_adr: `${image}`
      //   // thumb_adr: `${image}`
      // })
    },
    async submit() {
      console.log(this.form)
      const res = await createDynamic(this.form)
      console.log(res)
      alert(res.msg)
      this.$router.replace({ name: 'dynamic' })
    }
  }
}
</script>

<style lang="less" scoped>
.container-layer-releasedynamic {
  .block-releasedynamic-textarea {
    width: 100%;
    padding: 20px;
    border: 0;
    outline: 0;
    font-size: 17px;
    box-sizing: border-box;
    resize: none;
  }
  .container-dynamic-upload {
    width: calc(100vw / 3 - 1.5vw);
    height: calc(100vw / 3 - 1.5vw);
    position: relative;
    padding: 1vw;
    box-sizing: border-box;
    border: 2px dotted;
    border-radius: 10px;
    color: #aaa;
    .miva-plus {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 40px;
    }
  }
  .submit-btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    padding: 10px;
    text-align: center;
    background-color: #f45050;
    color: #fff;
  }
  padding-bottom: 50px;
}
</style>
